
{% extends 'base.html' %}

{% block body %}

<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Results for <span style='color: rgb(30, 202, 78);'>{{q}}</span>
</p>

{% if tracks| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Songs
</p>
{% endif %}

  <div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
        <table class="table table-dark justify-content space-between">
            <tbody>

              {% for i in range(tracks| length) %}

              
                {% if i == 0 %}
                  <tr style="height:40px; border: 0px solid #fff !important;" >
                {% else %}
                  <tr style="height:40px;" > 
                {% endif %}

                    {% if i == 0 %}
                      <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                    {% else %}
                      <th scope="row" style='padding: 0px;'> 
                    {% endif %}

                      <a class='no-link' href='artist.html'>
                        <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{tracks[i].alb_image}})" ></div>
                      </a>
                    </th>

                      {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href="{{ url_for('song', uri=tracks[i].trc_id) }}">
                              {% if tracks[i].trc_name|length >= 25 %}
                                {{tracks[i].trc_name[:23]}}...
                              {% else %}
                                {{tracks[i].trc_name}}
                              {% endif %}
                          </a>
                       </td>

                       {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=tracks[i].art_id) }}'>
                              {% if tracks[i].art_name|length >= 25 %}
                                {{tracks[i].art_name[:23]}}...
                              {% else %}
                                {{tracks[i].art_name}}
                              {% endif %}
                          </a>
                        </td>

                      {% if i == 0 %}
                          <td style="border: 0px solid #fff !important;">
                        {% else %}
                          <td>
                        {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=tracks[i].alb_id) }}'>
                              {% if tracks[i].alb_name|length >= 20 %}
                                {{tracks[i].alb_name[:17]}}...
                              {% else %}
                                {{tracks[i].alb_name}}
                              {% endif %}
                          </a>
                        </td>
                        {% if i == 0 %}
                          <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                        {% else %}
                        <th class="text-justify text-right">
                        {% endif %}
                        <a class='no-link' href='#'>
                          <span class="badge badge-success download-button">
                              <i class="fab fa-spotify"></i> Listen on Spotify
                          </span>
                        </a>

                        <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=tracks[i].trc_id)}}">
                          <span class="badge badge-primary download-button">
                            <i class="fas fa-arrow-alt-circle-down"></i> Download
                          </span>
                        </a>
                    </th>

                </tr>

              {% endfor %}

            </tbody>
          </table>
</div>

{% if albums| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Albums
</p>
{% endif %}

<div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
    
    {% for album in albums %}
        <div class="border cursor-pointer-all-obj">
            <a class='no-link' href='{{ url_for('album', uri=album.alb_id)}}'>
              <div class="image-shadow" style="background-image:url({{album.alb_image}})" ></div>
              <p class="item-text-3">{{album.alb_name}}</p>
            </a>
        </div>
      {% endfor %}
  </div>


{% if artists| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Artists
</p>
{% endif %}

<div class='artists-slider lazy' style='width:82%; margin-left: 18%;' >

    {% for artist in artists %}

      <div class="border cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
            <div class="image-shadow-circ lazy-bg" style="background-image:url({{artist.image}})" ></div>
            <p class="item-text-3">{{ artist.name }}</p>
          </a>
      </div>

    {% endfor %}
</div>


{% if playlists| length %}
<p class='title' style='margin-top: 0px; margin-bottom: 10px;'>
    Playlists
</p>
{% endif %}

<div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    {% for playlist in playlists %}
      <div class="border-playlist cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
            <div class="image-shadow-playlist" style="background-image:url({{playlist.image}})" ></div>
            <p class="item-text-5">{{ playlist.name }}</p>
          </a>
      </div>
    {% endfor %}
</div>


{% endblock %}